<template>
  <div>
    <div class="hearder-search">
      <div class="breadcrumb-container">
        <el-input v-model="searchWord" placeholder="菜品名称" @keyup.enter.native="searchBtn" size="small"
                  class="w-140 mr-10"></el-input>
        <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
        <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
      </div>
      <div class="breadcrumb-container">
        <el-button type="primary" @click.native="addFood('add')" size="small">添加菜品</el-button>
        <el-button type="" @click="actionSheet('excel')" size="small">导入周餐表</el-button>
        <el-button type="" @click="weekFoodVisible=true" size="small">本周餐品明细</el-button>
        <el-button type="warning" size="small" @click="qrcodeVisible = true" plain>评分二维码</el-button>
        <span class="allbook">总 {{ page.total }} 条数据</span>
      </div>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableoption.tableStripe"
            :border="tableoption.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
<!--          <el-table-column-->
<!--              type="selection"-->
<!--              width="50">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="id"-->
<!--              label="ID"-->
<!--              width="100">-->
<!--          </el-table-column>-->
          <el-table-column
              prop="name"
              label="菜品名称">
          </el-table-column>
          <el-table-column
              label="喜欢/不喜欢">
            <template slot-scope="scope">
              {{ `${scope.row.goods_number?scope.row.goods_number:0}/${scope.row.bad_number?scope.row.bad_number:0}` }}
            </template>
          </el-table-column>
          <el-table-column
              label="好评率">
            <template slot-scope="scope">
              {{ scope.row.rateFood }}%
            </template>
          </el-table-column>
          <el-table-column
              prop="create_time"
              label="上架时间">
          </el-table-column>
          <el-table-column
              label="操作"
              width="270">
            <template slot-scope="scope">
              <el-button size="small" @click="foodId=scope.row.id,contentVisible=true">点评明细</el-button>
              <el-button size="small" @click="handleEdit(scope.$index, 'edit')">菜品编辑</el-button>
              <el-button type="danger" size="small" @click="handleDetel(scope.$index)" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
    </el-col>
    <footAdd :foodOption.sync="foodOption" :visible.sync="dialogVisible"
             @initPage="InitFn"></footAdd>
    <form style="display: none" enctype="multipart/form-data">
      <input type="file" accept=".xls, .xlsx" @change="handleFile('excel')" class="hiddenExcelInput"
             id="uploadExcelFile" ref="uploadExcelFile"/>
    </form>
    <teachFoodWeek :visible.sync="weekFoodVisible"></teachFoodWeek>
    <qrcode_area :visible.sync="qrcodeVisible" classoption="special" type="food"></qrcode_area>
    <contentList :visible.sync="contentVisible" :foodId="foodId"></contentList>
  </div>
</template>

<script>
import footAdd from './food_teach_add'
import {pagination, tableoption} from '@/utils/util.js'
import {teachFoodIndex, teachFoodDelete, teachFoodImport} from '@/api/admin/food'
import teachFoodWeek from "./teachFoodWeek";
import contentList from "./contentList";

export default {
  components: {
    footAdd,
    teachFoodWeek,
    contentList
  },
  data() {
    return {
      qrcodeVisible:false,
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索
      searchWord: '',
      // 弹窗
      dialogVisible: false,
      foodOption: '',
      weekFoodVisible: false,
      contentVisible: false,
      foodId: 0
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      const loading = this.$loading({
        lock: true,
        text: '加载中…',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.4)'
      });
      teachFoodIndex({
        p: this.page.pageindex,
        name: this.searchWord,
      }).then(res => {
        if (!res.code) {
          for (let item of res.list.data) {
            // console.log('item:', item)
            // let count = (Number(item.goods_number) / (Number(item.goods_number) + Number(item.bad_number))).toFixed(2)
            // console.log('count:', Number(item.goods_number) + Number(item.bad_number))
            // console.log('count:', Number(item.goods_number))
            // console.log('count:', Number(item.bad_number))
            // console.log('count:', count)
            let count = 0
            if(Number(item.goods_number)){
              count = (Number(item.goods_number) / (Number(item.goods_number) + Number(item.bad_number))).toFixed(2)
              count = parseFloat(count)*100
            }
            item.rateFood = count
            item.create_time = item.create_time.split(' ')[0]
          }
          this.arryList = JSON.parse(JSON.stringify(res.list.data))
          this.page.total = res.list.total
        }
        setTimeout(() => {
          loading.close();
        }, 500);
      })
    },
    // 导入餐表
    actionSheet() {
      this.$el.querySelector('.hiddenExcelInput').click()
    },
    async handleFile() {
      // 此处不能使用event.target，否则手机上不能显示
      let n = this;
      let file = document.querySelector('#uploadExcelFile')
      let formData = new FormData()
      if (file.files[0]) {
        // Indicator.open('上传中…')
        formData.append('file', file.files[0])
        // 接下来就可以用 ajax 提交 formData
        let data = await this.$post('upload/oldupload', formData);
        console.log('data:', data)
        if (!data.code) {
          n.excelFile = data.data.name
          n.getExcelDetail()// 获取excel中的数据
          n.$refs.uploadExcelFile.value = ''
        }
      }
    },
    // 导入周餐表
    async getExcelDetail() {
      teachFoodImport({file: this.excelFile}).then(res => {
        console.log('导入餐品：', res)
        if (!res.code) {
          this.$message.success('导入成功！')
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      this.handleSelection = val
    },
    // 编辑
    handleEdit(index) {
      this.foodOption = this.arryList[index]
      this.dialogVisible = true
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    addFood() {
      this.foodOption = ''
      this.dialogVisible = true
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.searchWord = ''
      this.InitFn()
    },
    handleDetel(index) {
      let this_ = this
      this.$confirm('此操作将永久删除 ' + this.arryList[index].name + ' 菜品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        this_.deletFn(index)
      }).catch(() => {
      })
    },
    deletFn(index) {
      teachFoodDelete({
        id: this.arryList[index].id
      }).then(res => {
        if (!res.code) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.InitFn()
        } else {
        }
      })
    }
  },
  mounted() {
  }
}
</script>
